import {
  type Preset,
  defineConfig,
  presetUno,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet'

// @ts-expect-error: 忽略 process 对象未定义的错误
const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false
const presets: Preset[] = []
if (isMp) {
  // 使用小程序预设
  presets.push(presetApplet(), presetRemRpx())
} else {
  presets.push(
    // 非小程序用官方预设
    presetUno(),
    // 支持css class属性化
    presetAttributify(),
  )
}

export default defineConfig({
  presets: [
    ...presets,
    // 图标
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
    }),
  ],
  // 主题
  theme: {
    // 颜色
    colors: {
      primary: '#3FB674', // 主色/点缀色（logo、品牌、重点突出）
      // success: 'pink',
      // info: 'pink',
      warning: '#FFA319', // 辅助色（图标、数据、警告提示）
      error: '#FC4C3F', // 辅助色（价格、图标、数据、错误提示）
      params: '#4C71FD', // 辅助色（图标、数据、文本链接）
      base: '#333333', // 中性色（正文文字）
      context: '#666666', // 表单颜色
      tip: '#999999', // 提示文字
      pageBg: '#F1F1F1', // 默认背景色
      cardBg: '#FFFFFF', // 卡片背景色
      gray: '#CDCED0', // 卡片背景色
    },
    // 字体大小
    fontSize: {
      mini: '24rpx',
      small: '28rpx', // 正文
      normal: '32rpx', // 标题
      medium: '36rpx', // 大标题
      large: '48rpx',
    },
    // 字体类型
    fontFamily: {},
    // 间距
    spacing: {
      mini: '16rpx',
      small: '20rpx', // 卡片上下边距
      normal: '28rpx', // 卡片左右边距
      medium: '32rpx', // 卡片内部边距
      large: '48rpx',
    },
    // 圆角
    borderRadius: {
      mini: '8rpx', // 按钮圆角
      small: '16rpx',
      normal: '20rpx', // 卡片圆角
      medium: '32rpx',
      large: '40rpx',
    },
    screen: {
      xs: '640px',
      sm: '768px',
      base: '1024px',
      lg: '1280px',
      xl: '1920px',
    },
    // 背景色
    backgroundColor: {
      default: '#F6F7FC',
      card: '#FFFFFF',
      pageBg: '#F1F1F1', // 默认背景色
    },
    // 边框色
    borderColor: {},
  },
  // 快捷方式
  shortcuts: [
    ['yl-center', 'flex justify-center items-center'],
    ['yl-alignCenter', 'flex items-center'],
    ['yl-between-center', 'flex justify-between items-center'],
    ['yl-full', 'w-full h-full'],
    ['yl-screen', 'w-screen h-screen'],
    ['yl-absolute', 'absolute top-0 left-0'],
  ],
  // 转换器
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
    transformerAttributify({
      // 解决与第三方框架样式冲突问题
      prefixedOnly: true,
      prefix: 'fg',
    }),
  ],
  // 规则
  rules: [
    [
      'yl-base-text', // 正文字体样式
      {
        'font-family': 'PingFang SC, PingFang SC',
        'font-size': '28rpx',
        color: '#333333',
      },
    ],
    [
      'yl-base-card', // 卡片样式
      {
        background: '#FFFFFF',
        'box-shadow': '0rpx 4rpx 18rpx 2rpx #DFEBE8',
        'border-radius': '20rpx 20rpx 20rpx 20rpx',
      },
    ],
    [
      'p-safe',
      {
        padding:
          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
      },
    ],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  ],
})
